<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        *{
            margin-top: 20px;
        }
        .demo1{
            height: 50px;
            background-color: skyblue;
        }
        .box1{
            padding: 5px;
            background-color: skyblue;
        }
        .box2{
            padding: 5px;
            background-color: orange;
        }
        .list{
            width: 200px;
            height: 200px;
            background-color: peru;
            overflow: auto;
        }
        li{
            height: 100px;
        }
    </style>
</head>
<body>
    <div id="root">
        <!-- <h2>hello,{{name}}</h2>
        <button v-on:click="showInfo1">点我提示信息1</button>
        <button @click="showInfo2($event,66)">点我提示信息2</button> -->
        <!-- 1.事件修饰符 -->
        <!-- 1.1阻止默认行为 -->
        <!-- <a href="http://www.baidu.com" @click.prevent="showInfo">阻止默认行为</a> -->
        <!-- 1.2阻止事件冒泡 -->
        <!-- <div @click="showInfo">
            <button @click.stop="showInfo">阻止事件冒泡</button>
        </div> -->
        <!-- 1.3事件触发一次 -->
        <!-- <button @click.once="showInfo">事件触发一次</button> -->
        <!-- <input type="text" placeholder="按下回车提示输入" @keydown.enter="enter"> -->
        <!-- 2.计算属性 -->
        <!-- 姓：<input type="text" v-model="firstName" name="" id="">
        名：<input type="text" v-model="lastName" name="" id="">
        姓名：<span>{{fullName}}</span> -->
        <!-- 3.监视属性
        当被监视的属性变化时，回调函数自动调用，进行相关操作
        监视的属性必须存在，才能进行监视
        -->
        <!-- 1.基本监视 -->
        <!-- <h2>今天天气好{{info}}</h2>
        <button @click="changeWeather">点击切换天气</button> -->
        <!-- 2.深度监视 -->
        <h3>a的值是:{{number.a}}></h3>
        <button @click="number.a++">点击让a+1</button>
        <h3>b的值是:{{number.b}}></h3>
        <button @click="number.b++">点击让b+1</button>

    </div>
</body>
    <script>
        Vue.config.productionTip = false 
        new Vue({
            el:"#root",
            data:{
                // name:"张三"
                // firstName:"张",
                // lastName:"三"
                isHot:true,
                number:{
                    a:1,
                    b:1
                }
            },
            computed:{
                // fullName(){
                //     return this.firstName+"-"+this.lastName
                // }
                // info(){
                //     return this.isHot?"炎热":"冰凉"
                // }
            },

            watch:{
                // isHot:{
                //     immediate:true ,//初始化时让handler调用一下
                //     //handler什么时候调用？当isHot发生改变时
                //     handler(newValue,oldValue){
                //         console.log("isHot被修改了",oldValue,newValue)
                //     }
                // }
                // number:{
                //     deep:true,
                //     handler(newValue,oldValue){
                //         console.log("值改变了",oldValue,newValue)
                //     }
                // }
                 //简写
                isHot(newValue,oldValue){
				console.log('isHot被修改了',newValue,oldValue,this)
			}
            },
            methods:{
            //     showInfo1(event){
            //     alert(event)
            // },
            // showInfo2(event,num){
            //     console.log(event,num)
            // }
            // showInfo(){
            //     alert("展示")
            // }
            // enter(){
            //     alert("该输入了")
            // }
            // changeWeather(){
            //     this.isHot=!this.isHot
            // }
           
            }
          
        })
    </script>
</html>